<%@include file="../common/foot.jsp" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>eSHOP注册</title>

    <style type="text/css">
        .myTextInput {
            width: 500px;
        }
        .myVerifyInput {
            width: 300px;
        }
        .myButtonInput {
            width: 250px;
        }
    </style>
</head>
<body>

<div class="nk-container">
    <!-- 内容 -->
    <div class="main">
        <div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
            <h3 class="text-center text-info border-bottom pb-3">注&nbsp;&nbsp;册</h3>
            <form method="post" action="${pageContext.request.contextPath}/jsp/user/user.do?method=register">
                <div class="form-group row">
                    <label for="username" class="col-sm-4 col-form-label text-right">账号:</label>
                    <div class="col-sm-8">
                        <input id="username_Input" type="text" class="form-control myTextInput"
                               value="${username}"
                               id="username" name="username" placeholder="请输入您的账号!" onblur="verificationName()" required>
                        <span id="myDivUserName" class="mySpan" style="color: red"></span>
                        <c:if test="${usernameMsg != null}">
                            <span class="mySpan" style="color: red">
                                    ${usernameMsg}
                            </span>
                        </c:if>
                    </div>

                </div>
                <div class="form-group row mt-4">
                    <label for="password" class="col-sm-4 col-form-label text-right">密码:</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control myTextInput"
                               id="password" name="password" placeholder="请输入您的密码!" required>
                        <c:if test="${passwordMsg != null}">
                            <span class="mySpan" style="color: red">
                                    ${passwordMsg}
                            </span>
                        </c:if>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="again_password" class="col-sm-4 col-form-label text-right">确认密码:</label>
                    <div class="col-sm-8">
                        <input type="password" class="form-control myTextInput"
                               id="again_password" placeholder="请再一次输入您的密码!" required>
                        <span id="myDivPassword" class="mySpan" style="color: red"></span>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="email" class="col-sm-4 col-form-label text-right">邮箱:</label>
                    <div class="col-sm-8">
                        <input type="email" class="form-control myTextInput"
                               id="email" name="email" placeholder="请再一次输入您的密码!" required>
                        <c:if test="${emailMsg != null}">
                            <span class="mySpan" style="color: red">
                                    ${emailMsg}
                            </span>
                        </c:if>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <div class="col-sm-2"></div>
                    <label for="verifycode" class="col-sm-2 col-form-label text-right">验证码:</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control myVerifyInput" id="verifycode" name="code" placeholder="请输入验证码!">
                        <c:if test="${codeMsg != null}">
                            <span class="invalid-feedback" style="color: red">
                                    ${codeMsg}
                            </span>
                        </c:if>
                    </div>
                    <div class="col-sm-4">
                        <img src="${pageContext.request.contextPath}/jsp/code/kaptcha.do" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
                        <a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>
                    </div>
                </div>

                <div class="form-group row mt-4">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10 text-center">
                        <button type="submit" class="btn btn-info text-white form-control myButtonInput">立即注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>


<script>

    $(function () {
        //绑定form表单 submit函数，在页面刚刚加载时
        $("form").submit(check_data);
    });

    function check_data() {
        var pwd1 = $("#password").val();
        var pwd2 = $("#again_password").val();
        if(pwd1 != pwd2) {
            $("#myDivPassword").text("两次密码不一致");
            return false;
        }
        return true;
    }

    function verificationName() {
        $.post({
            url:"${pageContext.request.contextPath}/jsp/user/user.do?method=verification",
            dataType: "text",
            data:{"username":$("#username_Input").val()},
            success:function (data) {
                if(data == "true") {
                    $("#myDivUserName").css("color","green");
                    $("#myDivUserName").text("此用户名可以使用");
                }else{
                    $("#myDivUserName").css("color","red");
                    $("#myDivUserName").text("此用户名已被注册");
                }
            }
        });
    }

<%--    获取验证码--%>
    function refresh_kaptcha() {
        var path = "${pageContext.request.contextPath}/jsp/code/kaptcha.do?p=" + Math.random();
        $("#kaptcha").attr("src",path);
    }
</script>


</body>
</html>
